<template>
	<view class="table-container">
		<view class="table-top">
			<template v-if="tableTopList.length>0">
				<view class="tr" v-for="(item,index) in tableTopList" :key="index">
					<view class="td" v-for="(tdItem,tdIndex) in columns" :key="tdIndex">
						{{item[tdItem.name]}}
					</view>
				</view>
			</template>

		</view>
		<nt-table class="table" :columns="columns" :table-data="tableData">
			<template slot="number" slot-scope="{rows,index}">
				<text v-if="index<5">
					{{rows.number}}
				</text>
				<text v-else>
					上一名差 <text style="color: red;"> {{rows.numberText}}</text>
				</text>
			</template>
		</nt-table>
	</view>
</template>

<script>
	export default {
		props: {
			columns: {
				type: Array,
				default: () => []
			},
			tableData: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			tableTopList() {
				return this.tableData.filter(o => o.user_id === (this?.$store?.getters?.userInfo?.id ?? 4932))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-container {
		.table-top {
			font-size: 14px;

			.tr {
				margin: 0 30rpx;
				display: flex;
				background: #8bcfd1;

				.td {
					padding: 20rpx 0;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}


		}
	}

	.table {
		padding: 0 30rpx;
		background: #FFF
	}

	::v-deep .table-header {
		background: #ddd;
	}

	::v-deep .line {
		position: relative;

		&:nth-child(-n+5) {
			// padding: 26rpx 0;

			.td {
				color: #fff !important;
				z-index: 1;

				&:first-child {
					font-size: 44rpx;
				}
			}

			&::before {
				content: '';
				width: 100%;
				height: 100%;
				background: #1B5BC5;
				position: absolute;
				top: 0;
				left: 0;
				color: #f00;
			}

			&:nth-of-type(2)::before {
				opacity: 0.9;
			}

			&:nth-of-type(3)::before {
				opacity: 0.8;
			}

			&:nth-of-type(4)::before {
				opacity: 0.7;
			}

			&:nth-of-type(5)::before {
				opacity: 0.6;
			}
		}
	}
</style>